<template>
  <div class="detail-content">
    <a-card style="width: 100%; height: 100%; overflow: aoto">
      <p slot="title" class="cardTitles">
        题目——<span>{{ questionName }}</span>
        <a-button type="primary" style="float: right" @click="backClick"
          >返回</a-button
        >
      </p>
      <div class="question-tree">
        <a-row>
          <a-col :span="8" class="left-content">
            <a-tree
              :tree-data="treeData"
              :show-line="showLine"
              :show-icon="showIcon"
              @select="onSelect"
              defaultExpandAll
              v-if="treeData.length > 0"
            >
            </a-tree>
            <a-empty style="margin: 48px 0" v-else />
          </a-col>
          <a-col :span="16" class="right-content">
            <a-list item-layout="horizontal" :data-source="data">
              <a-list-item slot="renderItem" slot-scope="item, index">
                <a-list-item-meta @click="select(item)">
                  <div slot="title">操作{{ index + 1 }}</div>
                  <div slot="description">{{ item.nodeContent }}</div>
                </a-list-item-meta>
              </a-list-item>
            </a-list>
          </a-col>
        </a-row>
      </div>
    </a-card>
  </div>
</template>

<script>
import questionTree from 'components/configuration/questionBank/questionTree'
import { getQuestionDetail } from '@/assets/js/utils.js'
export default {
  components: {
    questionTree
  },
  data() {
    return {
      questionName: '',
      showLine: true,
      showIcon: false,
      treeData: [],
      data: [],
      questionId: null
    }
  },
  mounted() {
    this.questionName = this.$route.query.question
    this.questionId = this.$route.query.id
    this.treeData = getQuestionDetail(this.questionId)
  },
  methods: {
    backClick() {
      this.$router.go(-1)
    },
    onSelect(checkedKeys, e) {
      console.log(checkedKeys)
      console.log(e)
      this.data = e.selectedNodes[0].data.props.nodeList
    },
    onCheck(checkedKeys, info) {
      console.log('onCheck', checkedKeys, info)
    },
    select(item) {
      console.log(item)
    }
  }
}
</script>

<style lang="stylus" scoped>
.detail-content
  height 100%
  .question-tree
    height 100%
    overflow hidden
  /deep/ .ant-card-body
    padding-top 0
  /deep/ .ant-card-body
    height calc(100% - 64px)
  /deep/ .ant-row
    height 100%
  .left-content
    border-right 1px solid #e8e8e8
    height 100%
    overflow auto
  .right-content
    padding-left 24px
    height 100%
    overflow auto
</style>